
<div class="container rj-bottom-margin">
    <div class="row">
        <div ng-if="$index<3" ng-click="utility.showModalImage(image.url)" ng-repeat="image in vm.product.images" class="col-sm-4 rj-image-card rj-link" style="background-image: url({{image.url}});">
        </div>
    </div>

    <p></p>
    <div class="row">
    </div>
    <div class="row">
        <div class="col-sm-7">
            <div class="page-header">
                <h1>{{vm.product.name}}<small style="float:right;margin-top:0.8em;">ID:{{vm.product.id}}</small></h1>
            </div>
            <span style="display: inline-block;">
                <h2>
                    {{vm.product.price |currency:'￥'}}
                    <small>
                        <del>
                            {{vm.product.old_price |currency:'￥'}}
                        </del>
                        <span>
                            库存 {{vm.product.number}}
                        </span>
                        <span class="btn btn-primary" ng-click="vm.addToCart();">添加到购物车</span>
                    </small>
                </h2>
            </span>
            <p ng-bind-html="vm.product.comment | to_trusted" style="font-size: 1.5em;">
                {{vm.product.comment}}
            </p>
        </div>
        <div class="col-sm-5" style="border-left: 2px solid #cccccc">
            <div class="row">
                <div  ng-repeat="story in vm.product.stories" class="col-sm-6 ">
                    <div class="well">
                        <a href="{{utility.generateUrl('story',story.id)}}">
                            <div class="thumbnail rj-image-card rj-image-card-small" style="background-image: url({{story.images[0].url}});height: 9em !important;">
                            </div>
                            <div>
                                {{story.title}}
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div ng-if="$index>=3" ng-click="utility.showModalImage(image.url)" ng-repeat="image in vm.product.images" class="col-sM-12 rj-link" >
                <img style="width:100%;" ng-src="{{image.url}}">
            </div>
        </div>
    </div>
    <div>
        <hr style="border-style: dashed;">
        <div class="row">
            <div ng-repeat="comment in vm.product.comments" class="col-sm-4" ng-show="$index<3 || vm.showAllComments" >
                <div class="well" style="border: 1px solid #cccccc;padding: 0.8em;padding-top: 0;margin-top: 1em;">
                    <span style="font-size: 2em;">{{comment.user_name}}</span>
                    <span style="margin-left: 1em;" ng-repeat="star in [1,2,3,4,5]">{{comment.rating>=star?'★':'☆'}}</span>

                    <p/>
                    <p style="font-size: 1.2em;">
                        {{comment.content}}
                    </p>
                    <span style="display: inline-block;background: #e2e2e2;">
                        <span  class="rj-link" ng-click="utility.showModalImage(image.url)" ng-repeat="image in comment.images" style="width: 25%;display:inline-block;">
                            <img style="width:100%;"  ng-src="{{image.url}}">
                        </span>
                    </span>
                </div>
            </div>
        </div>
        <div class="row" ng-init="vm.showAllComments=false;" ng-show="vm.showAllComments==false && vm.product.comments.length>3" ng-click="vm.showAllComments=true">
            <div class="col-sm-12" style="text-align: center;">
                <h5 class="rj-link">--显示全部评论--</h5>
            </div>
        </div>
    </div>
    <div ng-show="vm.product.allowMakeComment" ng-init="vm.comment = {};">
        <hr style="border-style: dashed">
        <h1>您的评价：<small>一次评论最多只能上传4张图片哦！</small></h1>
        <div class="row">
            <div class="col-sm-2">
            </div>
            <div class="col-sm-2">
                评分：
            </div>
            <div class="col-sm-8">
                <a ng-repeat="rat in [1,2,3,4,5]" ng-click="vm.comment.rating = rat;" class="btn {{vm.comment.rating==rat?'btn-primary':'btn-default'}}">
                    {{rat}}
                </a>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-2">
            </div>
            <div class="col-sm-2">
                内容：
            </div>
            <div class="col-sm-8">
                <input type="text" ng-model="vm.comment.content">
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <ng-include src="'/template/component/UploadFile.html'"></ng-include>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12" style="text-align: center;">
                <a class="btn btn-primary" ng-click="vm.makeComment();">保存评价</a>
            </div>
        </div>
    </div>
</div>



